<template>
    <div class="ontheway">
        <div class="searchFormBox">
            <el-form ref="searchForm" label-width="70px" :model="searchForm" :rules="searchRules" :inline="true" size="mini">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="车牌号">
                            <el-input style="width:231px;height:32px" v-model="searchForm.plateNumber" clearable placeholder="请输入车牌号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
               <el-row>
                   <el-col :span="24">
                       <el-form-item label="开始时间">
                            <el-date-picker clearable v-model="searchForm.startTime" type="datetime" placeholder="开始日期和时间" size="small"></el-date-picker>
                        </el-form-item>
                   </el-col>
               </el-row>
                
                <el-row>
                   <el-col :span="24">
                        <el-form-item label="结束时间">
                            <el-date-picker clearable v-model="searchForm.endTime" type="datetime" placeholder="结束日期和时间" size="small"></el-date-picker>
                        </el-form-item>
                   </el-col>
               </el-row>
                
                <el-row>
                   <el-col :span="24">
                      <el-form-item>
                        <el-button type="primary" @click="searchBtn">查询</el-button>
                    </el-form-item>  
                   </el-col>
               </el-row>
                
            </el-form>
        </div>
        <trainComponent ref="child" :groundStartTime='groundStartTime' :groundEndTime="groundEndTime" :childMsg="childMsg"></trainComponent>
    </div>
</template>

<script>
import trainComponent from './track-query.vue'
export default {
    data() {
        return {
            searchForm: {
                plateNumber: '陕YH0009',
                startTime: '2020-07-25 09:00:00',
                endTime: '2020-07-26 09:00:00',
                // plateNumber: '',
                // startTime: '',
                // endTime: '',
            },
            searchRules: {

            },
            showSearchForm: false,
            childMsg: '',
            groundStartTime: '',
            groundEndTime: '',
        }
    },
    components: {
        trainComponent
    },
    methods: {
        searchBtn() {
            // 表单验证
            this.childMsg = this.searchForm.plateNumber
            this.groundStartTime = this.searchForm.startTime
            this.groundEndTime = this.searchForm.endTime
            setTimeout(()=>{
              this.$refs.child.search_step2()  
            },500)
           
        }
    }
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-input__inner{
            height: 32px !important;
            line-height: 32px !important;
            margin-bottom: 10px;
    }
    ::v-deep .el-button{
        width: 360px !important;
        height: 40px !important;
        font-size: 15px;
        margin-top: 20px;
    }
.ontheway {
    width: 100%;
    height: 100%;
    position: relative;
    .searchFormBox {
        width: 425px;
        height: 350px;
        background: #fff;
        padding: 30px;
        position: absolute;
        z-index: 1000;
        top: 5%;
        left: 5%;
       
    }
}
</style>